<template>
  <div class="orderDetail">
    <header class="detail">
      <a-card :bordered="false" :title="'订单编号:' + orderInfo.order_id">
        <div slot="extra" class="description">
          <a-tag :color="color">{{ statusName }}</a-tag>
        </div>
        <a-descriptions
          bordered
          :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
          v-if="orderInfo"
        >
          <a-descriptions-item label="付款人">
            {{ userInfo.name }}
          </a-descriptions-item>
          <a-descriptions-item label="付款方式">
            {{
              orderInfo.mode_of_payment ? orderInfo.mode_of_payment : '未付款'
            }}
          </a-descriptions-item>
          <a-descriptions-item
            :label="orderInfo.payment_time ? '支付时间' : '下单时间'"
          >
            {{
              orderInfo.payment_time
                ? orderInfo.payment_time
                : orderInfo.order_time
            }}
          </a-descriptions-item>
          <a-descriptions-item label="总计">
            {{ orderInfo.total_price }}元
          </a-descriptions-item>
          <a-descriptions-item label="收货地址">
            {{ orderInfo.s_address.area_name + ',' + orderInfo.s_address.desc }}
            <span>邮编：{{ orderInfo.s_address.post_code }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="收货人">
            {{ orderInfo.s_address.name }}
          </a-descriptions-item>
          <a-descriptions-item label="收货人联系方式">
            {{ orderInfo.s_address.phone }}
          </a-descriptions-item>
          <a-descriptions-item label="快递 ID">
            {{ orderInfo.logistics ? orderInfo.logistics : '暂无' }}
          </a-descriptions-item>
          <a-descriptions-item label="发票">
            {{ orderInfo.invoice ? orderInfo.invoice : '暂无' }}
          </a-descriptions-item>
          <a-descriptions-item label="商品信息">
            <a-list item-layout="vertical" size="large">
              <a-list-item
                v-for="ele in orderInfo.goods_info"
                :key="ele.id"
                style="border: 1px dashed black"
              >
                <a-list-item-meta
                  :title="'' + ele.goods_name"
                  :description="ele.desc"
                >
                  <a-avatar
                    slot="avatar"
                    :src="ele.s_goods_photos[0].path"
                    :size="100"
                  />
                </a-list-item-meta>
                <div
                  class="content"
                  style="display: flex; justify-content: flex-end; margin-right: 10px"
                >
                  <p>实付:{{ ele.sale_price || ele.price }}元</p>
                  <p>x{{ ele.num }}件</p>
                </div>
              </a-list-item>
            </a-list>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </header>
    <div style="float: right; margin: 10px 2px">
      <a-button style="margin-right: 10px" type="danger" @click="refund"
        >订单退款</a-button
      >
      <a-button style="margin-right: 10px" type="primary" @click="send"
        >订单发货</a-button
      >
      <a-button
        style="margin-right: 10px"
        type="primary"
        @click="showModal = true"
        >完成订单</a-button
      >
      <a-button type="primary">
        <router-link to="/order/list">返回</router-link>
      </a-button>
    </div>
    <a-modal
      v-model="showModal"
      title="温馨提示"
      ok-text="确认"
      cancel-text="取消"
      @ok="updateStatus"
    >
      确认将该订单变成完成状态吗?
    </a-modal>
  </div>
</template>

<script>
import {
  orderDetail,
  updateOrderStatus,
  refundOrder,
  createLogistics,
} from '@/services/shopApi/order';
import { getCustomerInfo } from '@/services/user';
import moment from 'moment';
const config = [
  {
    id: 9,
    value: '',
    name: '全部',
    color: '',
  },
  {
    id: 10,
    value: '0',
    name: '已过期',
  },
  {
    id: 1,
    value: '1',
    name: '已下单',
    color: '',
  },
  {
    id: 2,
    value: '2',
    name: '已支付',
    color: '#87d068',
  },
  {
    id: 3,
    value: '3',
    name: '已发货',
    color: '#108ee9',
  },
  {
    id: 4,
    value: '4',
    name: '退货中',
    color: 'cyan',
  },
  {
    id: 5,
    value: '5',
    name: '退款中',
    color: 'orange',
  },
  {
    id: 6,
    value: '6',
    name: '已完成',
    color: 'blue',
  },
  {
    id: 7,
    value: '7',
    name: '已取消',
    color: '',
  },
  {
    id: 8,
    value: '-1',
    name: '已删除',
    color: '#f50',
  },
];
export default {
  name: 'orderDetail',
  created() {
    this.render();
  },
  data() {
    return {
      userInfo: '',
      orderInfo: '',
      config,
      color: '',
      statusName: '',
      showModal: false,
    };
  },
  methods: {
    orderStatus() {
      config.map((ele) => {
        if (ele.value == this.orderInfo.status) {
          this.statusName = ele.name;
          this.color = ele.color;
        }
      });
    },
    async render() {
      try {
        const orderRes = await orderDetail(this.$route.params.id);
        const userRes = await getCustomerInfo(this.$route.query.user_id);
        this.orderInfo = orderRes.result;

        if (this.orderInfo.order_time) {
          this.orderInfo.order_time = moment(
            new Date(Number(this.orderInfo.order_time))
          ).format('YYYY-MM-DD  HH:mm:ss');
        }
        if (this.orderInfo.payment_time) {
          this.orderInfo.payment_time = moment(
            +this.orderInfo.payment_time
          ).format('YYYY-MM-DD  HH:mm:ss');
        }
        this.userInfo = userRes.result;
        await this.orderStatus();
      } catch (error) {
        this.$message.error(error);
      }
    },
    updateStatus() {
      updateOrderStatus({ id: this.$route.params.id, status: '6' })
        .then((res) => {
          this.$message.success(res.msg);
          this.render();
          this.showModal = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    refund() {
      this.$confirm({
        title: '确定要退款吗？',
        content: '退款后，钱就会返回到原支付方式中了哦',
        onOk: async () => {
          const result = await refundOrder({
            out_trade_no: this.orderInfo.order_id,
            reason: '7天无理由退款',
          });

          if (
            result.result.status !== 'PROCESSING' &&
            result.result.status !== 'SUCCESS'
          )
            return this.$message.error(result.msg);
          return this.$message.success(result.msg);
        },
      });
    },
    async send() {
      const result = await createLogistics({
        order_id: this.orderInfo.order_id,
      });
      if (result.code !== 200) return this.$message.error(result.msg);
      this.$message.success('物流创建成功');
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.description {
  display: flex;
  justify-content: flex-end;
}
</style>
